监控篇 - 线上埋点、预警

前言

在完整的工程化体系中，线上预警是必不可少的，但是自己全部开发的话，是非常耗时、耗力的，综合成本考虑的话，我们可以选择一些第三方开源的系统来协助我们，综合来看 Sentry 是一个非常不错的选择。

Sentry

为什么使用 Sentry

支持的开发框架非常多，基本涵盖了市面流行的所有框架

sentry 支持手动与自动上报，即可无痕监听项目中的错误也可以自定义上报一些内容，分析数据。
Sentry 支持私有部署，如果是公司的项目，私有化部署可以自定义更多的功能。

综上一些优点，Sentry 在对中小型公司来说，是一个不可多得的软件。

安装 Sentry

Sentry 的安装非常简单，支持 docker 直接部署，那么我们在之前的服务器中继续安装一个的 Sentry。

```
安装 docker-compose
```

sudo yum install epel-release
sudo yum install -y python-pip
sudo pip install docker-compose

制作本地数据库和sentry的目录配置，用来绑定挂载

sudo mkdir -p data/{sentry,postgres}

```
下载 Sentry 项目
```

git clone https://github.com/getsentry/onpremise.git

按照官网的直接安装

sudo SENTRY_IMAGE=us.gcr.io/sentryio/sentry:83b1380 ./install.sh

顺利的话，此时应该已经安装成功了，打开 http://192.168.160.88:9000/ 既可以看到下面的界面：

使用 Sentry

常规使用

创建 sentry 项目

配置项目

安装 sentry 客户端

yarn add @sentry/react @sentry/tracing

sentry 注入

import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import App from "./App";

Sentry.init({
  dsn: "",
  autoSessionTracking: true,
  integrations: [
    new Integrations.BrowserTracing(),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

ReactDOM.render(<App />, document.getElementById("root"));

获取 DSN

点击 issue 进入项目，配置选择 DSN 选项：

如果你的 DSN 为空的话

修改 Sentry 的 config.yml

###################
# System Settings #
###################

# If this file ever becomes compromised, it's important to regenerate your a new key
# Changing this value will result in all current sessions being invalidated.
# A new key can be generated with `$ sentry config generate-secret-key`
# system.secret-key: 'changeme'
system.url-prefix: 'http://my-sentry-host:9000'

然后重启 docker 即可

docker-compose build # Build the services again after updating
docker-compose up -d # Recreate the services

怕麻烦的话，自己组装一个也行：格式是 http://公钥@ip:port/projectid。

运行项目如果出现下图的请求的话，代表配置没问题了：

接下来可以看到我们已经上传了一条 Performance 信息在 sentry 里面。

我们在尝试在项目中写一个 console.log(dd)，然后可以发现在 sentry 里面已经创建了一个 issue 了。

sourcemap

根据上图大家也能看到，Sentry 能捕获到错误堆栈，但是在生产中一般都是对代码做一个压缩混淆的，所以反馈出来的问题不是那么直观，我们需要上传对应的 Sourcemap 到 Sentry 上，这个时候需要用到 Sentry CLI。

因为我们的 devops 是多项目，不限于脚手架，所以我们直接用 Sentry CLI 来上传，而不借助 Webpack 的插件，有兴趣的同学可以看一下 Sentry 的 Webpack 插件。

上传 sourcemap 其实麻烦，我们只需要在 deploy 环境，在项目根路径创建一个 .sentryclirc 文件。

javascript

[defaults]
url=http://192.168.160.88:9000 
// 如果你的操作都是对的，但是 token 报错，一般都是 sentry 默认上传路径被指向 sentry.io，需要添加这个强制指向本地的 sentry 地址。

[auth]
\r\n[defaults]\r\nurl=http://192.168.160.88:9000
project=fe-bp-ops
org=sentry
token=bd688046f6fc432daa7e7ab0e237a73bf175367364d14fe295879683a6fd1770

其中的 token 获取的方式如下图，

然后 shell 执行

shell

npx sentry-cli releases -o sentry -p fe-bp-ops files dev@0.0.1 upload-sourcemaps ./dist'

分别代表，-o 组织名，-p 项目名，files 版本，upload-sourcemaps 路径即可。执行完毕即可在 Sentry 上看到对应项目中已经存在了对应版本的 sourcemap。

本章小结

在本章，我们学习了使用 Sentry 来作为项目的线上预警系统。

Sentry 的新版本也添加了 Performance 的功能，对于前端的一些项目有一个自带的性能监控，做一个大概的参考还是不错的，毕竟免费、省力。

同时 Sentry 也支持自定义上报，如果自带的性能分析不满足的情况下，可以将一些独立的性能数据作为错误上报，然后进行分析，毕竟免费、省力，不过并不适合做业务埋点。

但是 Sentry 仅仅是一个预警工具，如果有条件，可以参考我之前的博文，做一套全面的无痕埋点系统。

如果你有什么疑问，欢迎在评论区提出，或者加群沟通。 👏

监控篇 - 线上埋点、预警 #

前言 #

Sentry #

为什么使用 Sentry #

安装 Sentry #

使用 Sentry #

常规使用 #

sourcemap #

本章小结 #